<template>
  <div id="GoodsCategory">
    <!-- 分类页顶部菜单和面包屑 -->
    <div class="mb-10 mt-6 flex items-center lg:hidden">
      <div
        @click="showLeft = true"
        class="ltr:mr-5 rtl:ml-5 flex h-9 w-16 items-center justify-center rounded-3xl bg-red1">
        <WImage class="mx-5 h-5 w-5" :src="useAsset('caidan.png')" />
      </div>
      <div class="lg:hidden text-sm font-[400] text-[#babbbb]">
        <nuxt-link external :to="$localePath('/')">BitTopup</nuxt-link>
        <span class="mx-1">/</span>
        <nuxt-link :to="$localePath(`/category/${currentParentCategory.id}`)">
          {{ currentParentCategory.categoryName }}
        </nuxt-link>
        <span v-if="currentSubCategory">
          <span class="mx-1">/</span>
          {{ currentSubCategory.categoryName }}
        </span>
      </div>
    </div>
    <!--    -->
    <div ref="categoryContainerEl" class="mt-8 flex items-start justify-between">
      <!--      大屏左侧分类 分类情况-->
      <CategoryContent class="sticky hidden lg:block top-5 ltr:mr-5 rtl:ml-5 w-[20%] rounded-md bg-[#2a3032]" />
      <!-- 大屏时展示的面包屑 -->
      <div class="flex-1">
        <div class="mb-6 hidden lg:block text-base font-[400] text-[#babbbb]">
          BitTopup
          <span class="mx-1 text-[#525455]">/</span>
          <nuxt-link external :to="$localePath(`/category/${currentParentCategory.id}`)">
            {{ currentParentCategory.categoryName }}
          </nuxt-link>
          <span v-if="currentSubCategory">
            <span class="mx-1 text-[#525455]">/</span>
            {{ currentSubCategory.categoryName }}
          </span>
        </div>
        <!-- 商品列表 -->
        <template v-if="goodsList.data.length">
          <!--        上部分-->
          <div class="grid grid-cols-1 lg:grid-cols-2 gap-x-8 mb-5">
            <NuxtLink
              external
              :to="$localePath(`/goods/${item.urlName || item.id}`)"
              class="mb-6 special-goods card-active flex w-full rounded-xl overflow-hidden"
              v-for="(item, index) in goodsList.data.slice(0, 4)"
              :key="index">
              <div class="h-[120px] shrink-0 w-[100px] lg:h-[138px] lg:w-[110px]">
                <y-image
                  :src="item.smallIcon"
                  class="h-full ltr:mr-3 rtl:ml-3 object-cover"
                  :alt="item.name"
                  height="138" />
              </div>
              <div
                class="flex-1 box-border flex flex-col justify-between bg-[top_center] bg-repeat-x pl-2 pr-5 py-2.5 lg:flex-1">
                <div>
                  <h3 class="mb-1 break-all text-sm lg:text-base text-white line-clamp-2">
                    {{ item.name }}
                  </h3>
                  <p class="text-xs lg:text-sm text-gray-light">{{ item.areaCode }}</p>
                </div>
                <div class="flex items-center text-xs text-[#eee]">
                  <div class="ltr:mr-2.5 rtl:ml-2.5 flex items-center">
                    <WImage class="ltr:mr-1 rtl:ml-1 h-3 w-3" :src="useAsset('cart.png')" />
                    <span>{{ item.totalSaleCount }}</span>
                  </div>
                  <div class="flex items-center text-xs text-[#eee]">
                    <WImage class="ltr:mr-1 rtl:ml-1 h-3 w-3" :src="useAsset('shoucang.png')" />
                    <span>{{ item.avgRate }}</span>
                  </div>
                </div>
              </div>
            </NuxtLink>
          </div>
          <!--              下部分-->
          <div
            class="grid grid-cols-[repeat(3,105px)] gap-3 place-content-between lg:justify-items-center lg:grid-cols-[repeat(auto-fill,150px)]">
            <NuxtLink
              external
              class="flex flex-col items-center mb-5"
              :to="$localePath(`/goods/${item.urlName || item.id}`)"
              v-for="(item, index) in goodsList.data.slice(4)"
              :key="index">
              <y-image
                class="mb-3 hover-scale product-poster h-[105px] w-auto max-w-[105px] lg:max-w-[150px] lg:h-[150px] rounded-xl object-cover"
                :src="$withPicOrigin(item.smallIcon)"
                :alt="item.name"
                height="138" />
              <h2 class="text-xs line-clamp-2 lg:px-0 lg:pr-2 max-w-[160px] text-center text-white lg:max-w-[150px]">
                {{ item.name }}
              </h2>
            </NuxtLink>
          </div>
        </template>
        <common-empty v-else />
      </div>
    </div>
    <!-- 分页 -->
    <footer class="flex justify-end">
      <van-pagination
        :total-items="goodsList.totalElements"
        :items-per-page="pageSize"
        class="w-full lg:w-[200px] custom-pagination"
        :model-value="curPage"
        mode="simple">
        <template #prev-text>
          <nuxt-link
            class="w-full h-full flex items-center justify-center"
            :class="{ 'pointer-events-none': +curPage == 1 }"
            external
            :href="
              $localePath(
                `/category/${parentCategoryId}${categoryId ? '/' + categoryId : ''}/${Math.max(1, curPage - 1)}`,
              )
            ">
            <van-icon name="arrow-left" />
          </nuxt-link>
        </template>
        <template #next-text>
          <nuxt-link
            external
            class="w-full h-full flex items-center justify-center"
            :class="{ 'pointer-events-none': curPage === totalPages }"
            :href="
              $localePath(
                `/category/${parentCategoryId}${categoryId ? '/' + categoryId : ''}/${Math.min(
                  totalPages,
                  curPage + 1,
                )}`,
              )
            ">
            <van-icon name="arrow" />
          </nuxt-link>
        </template>
      </van-pagination>
    </footer>
    <PopupLeft :active-index="activeIndex" :categoryList="categoryTree" v-model="showLeft" />
    <NewTabsFoot />
  </div>
</template>
<script setup lang="ts">
import PopupLeft from '~/components/category/PopupLeft.vue'
import WImage from '~/components/logic/WImage.vue'
import { useCategoryStore } from '~/store/category'
import YImage from '~/components/logic/YImage.vue'
import CommonEmpty from '~/components/basis/CommonEmpty.vue'
import NewTabsFoot from '~/components/basis/NewTabsFoot.vue'
import { useGoodsCategorySeo } from '~/composables/useTdk'

const route = useRoute()
let { parentCategoryId, categoryId, curPage } = route.params as any
const activeIndex = ref(parentCategoryId)
const showLeft = ref(false)
const categoryContainerEl = ref()
const categoryStore = useCategoryStore()

if (!curPage) {
  curPage = categoryId || 1
  categoryId = null
}
curPage = Math.max(+curPage, 1)
const pageSize = ref(55)
const { goodsList, categoryTree } = storeToRefs(categoryStore)

const totalPages = computed(() => Math.ceil(goodsList.value.totalElements / pageSize.value))
categoryStore.setCategoryId({ parentCategoryId, categoryId })

await useAsyncData(async () => {
  await categoryStore.initGoodsByCategoryId(curPage, pageSize.value)
  return 1
})
const currentParentCategory = computed(() => categoryTree.value.find((item) => item.id == +parentCategoryId) ?? {})
const currentSubCategory = computed(() =>
  currentParentCategory.value.subCategories?.find(({ id }) => id === +categoryId),
)
// tdk和富媒体
useGoodsCategorySeo(currentParentCategory.value, goodsList.value.data)
const { $mt } = useCommonPlugin()
const seoTitle = `BitTopup - ${currentParentCategory.value?.categoryName} ${currentSubCategory.value?.categoryName ? `${currentSubCategory.value?.categoryName} ` : ''}${$mt('Category')} - Page ${curPage} of ${totalPages.value}`
const seoDescription =
  $mt(
    'Explore our curated collection of gift cards suitable for all occasions. From retail and dining to entertainment and travel, find the perfect card to delight your loved ones. Shop now for easy gifting solutions!',
  ) +
  `At ${currentParentCategory.value?.categoryName} ${currentSubCategory.value?.categoryName ? `${currentSubCategory.value?.categoryName} ` : ''}Page ${curPage} of ${totalPages.value}`
useSeoMeta({
  title: seoTitle,
  ogTitle: seoTitle,
  description: seoDescription,
  ogDescription: seoDescription,
  ogImage: 'https://bittopup.com/logo.png',
  twitterCard: 'summary_large_image',
})
</script>
<style lang="scss" scoped>
#GoodsCategory {
  --van-border-width: 0px;

  .special-goods {
    $colors: (#a79b8c, #8b8085, #585d6b, #3c596f);

    background: url('public/v2/home-imgs/goods-bg.svg') no-repeat center top -20px / 200% 200%;

    @for $i from 1 to 5 {
      &:nth-child(#{$i}) {
        background-color: nth($colors, $i);
      }
    }
  }

  :deep(.van-pagination__item) {
    color: #fff;
    background: #35393b;
    border: 0;
    border-radius: 12px;
  }

  :deep(.van-pagination__items) {
    display: flex;
  }
}
</style>
